<template>
	<view class="container">
		<div class="battery-top">
			<!-- <p>当前使用浮板：0</p> -->
			<uni-search-bar style="width: 190px" @confirm="onSearch" :focus="true" v-model="searchValue" @clear="onClear" cancelButton="none"></uni-search-bar>
			<uni-data-select v-model="devStatus" :localdata="range" @change="onChange"></uni-data-select>
			<u-dropdown style="margin-right: 10px; background: #fff;">
				<u-dropdown-item v-model="heartbeat" :title="dropTitle" :options="options1" @change="changeHeart"></u-dropdown-item>
			</u-dropdown>
		</div>
		<scroll-view scroll-y="true" class="content" v-if="myList.length != 0" @scrolltolower="loadMore">
			<view class="batt" v-for="(item,index) in myList" :key="index" @click.stop="toBatteryDetail(item.code)">
				<p class="bianhao">编号：{{item.code}}</p>
				<div class="myinfo">
					<view class="money">
						总收入
						<text>￥{{item.total_fee}}</text>
					</view>
					<view>
						<text class="use">{{item.item_ky}}使用</text>/
						<text>共{{item.item_zs}}电池</text>
					</view>
				</div>
				<div class="shebei">
					<image class="batimg" src="/static/img/agent/battery.png" mode="widthFix"></image>
					<div class="sbright">
						<view class="name">
							<p>{{item.name}}</p>
							<div class="zaixian" v-if="item.state_text === '在线'">
								<image src="/static/img/agent/status.png" mode=""></image>
								<span>在线</span>
							</div>
							<div class="lixian" v-if="item.state_text === '掉线'">
								<image src="/static/img/agent/lixian.png" mode=""></image>
								<span>掉线</span>
							</div>
						</view>
						<div class="xinxi">
							<span>心跳时间：{{item.heartbeat_time}}</span>
							<span>地址：{{item.address}}</span>
						</div>
					</div>
				</div>
				<view class="u-flex" style="margin-top: 10px; justify-content: flex-end;">
					<view class="u-btn" @click.stop="openVol(item)">
						音量控制
					</view>
					<view class="u-btn" @click.stop="caoZuoDevice(item.device_id)">
						操作设备
					</view>
					<view class="u-btn" @click.stop="operateOrBuy(item, 'operate')">
						直接使用
					</view>
					<view class="u-btn" @click.stop="operateOrBuy(item, 'buy')">
						购买套餐
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="content" v-else>
			<view class="empty">
				暂无明细
			</view>
		</view>
		<!-- 音量控制 -->
		<view class="popupWray" v-if="showPopup">
			<view class="popupBox">
				<view class="closeBox" @click="closePopup">
					<image src="../../static/image/icon_close.png"></image>
				</view>
				<view class="btnBox">
					<view style="font-size: 36upx;margin-bottom: 20upx;">{{"设备编号:"+dev_item.code}}</view>
					<input style="font-size: 36upx;" type="number" max="30" min="0" placeholder="请输入音量" v-model="vol_num" />
					<button @click="changeVol()">提交</button>
				</view>
			</view>
		</view>
		<!-- 直接使用、购买套餐 -->
		<view class="useOrBuy" v-if="useOrBuyPopup">
			<view class="useOrBuyBox">
				<view class="closeBox" @click="closeuseOrBuyPopup">
					<image src="../../static/image/guanbi.png"></image>
				</view>
				<div class="box-content">
					<p class="title">{{operType === 'operate' ? '直接使用设备' : '购买设备'}}</p>
					<image class="erweima" :src="erweima" mode=""></image>
					<span class="saoma">扫码识别二维码</span>
					<span class="shuoming">{{operType === 'operate' ? '使用说明：请使用微信进行扫码，扫码当天可以使用。' : '使用说明：扫描上方二维码，进行套餐购买'}} </span>
				</div>
			</view>
		</view>
	</view>
</template>

<script>
	import { agentBattery, changeVol } from '../../api/api.js'
	export default {
		data() {
			return {
				myList: [],
				total: 0,
				last_page: 1,
				current_page: 1,
				per_page: 10,
				showPopup:false,
				vol_num:'',
				dev_item:{},
				isShowBlance: true,
				useOrBuyPopup: false,
				operType: '',
				erweima:'',
				searchValue: '',
				devStatus: '',
				heartbeat: 'desc',
				dropTitle: '心跳时间',
				range: [
					{ value: '', text: "全部" },
					{ value: 0, text: "掉线" },
					{ value: 1, text: "在线" },
				],
				options1: [
					{
						label: '从近到远',
						value: 'desc',
					},
					{
						label: '从远到近',
						value: 'asc',
					}
				],
			}
		},
		onLoad() {
			this.getInfo();
		},
		methods: {
			onSearch(res) {
				this.searchValue = res.value;
				this.current_page = 1;
				console.log(res.value, 'eeerrrrr');
				this.getInfo();
			},
			onClear() {
				this.searchValue = '';
			},
			onChange(e) {
				console.log("e:", e);
				this.devStatus = e;
				this.current_page = 1;
				this.getInfo();
			},
			openVol(item){
				this.showPopup = true;
				this.dev_item = item;
				this.vol_num = this.dev_item.vol;
			},
			changeHeart(val) {
				console.log(val, 'vvssaassee');
				this.heartbeat = val;
				if(val === 'desc') {
					this.dropTitle = '从近到远'
				} else {
					this.dropTitle = '从远到近'
				}
				this.getInfo();
			},
			changeVol(){
				changeVol({
					device_id: this.dev_item.id,
					vol: this.vol_num
				}).then(res => {
					if(res.code == 1){
						this.showPopup = false;
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
						this.vol_num = '';
					}
					return;
				})
			},
			closePopup(){
				this.showPopup = false;
			},
			operateOrBuy(item, type){
				this.operType = type;
				this.useOrBuyPopup = true;
				if (type === 'operate') {
					this.erweima = item.zj_qr_image;
				} else if(type === 'buy'){
					this.erweima = item.tc_qr_image;
				}
				console.log(item, 'iiitttee');
			},
			closeuseOrBuyPopup(){
				this.useOrBuyPopup = false;
			},
			getInfo(loadMore) {
				agentBattery({
					limit: this.per_page,
					page: this.current_page,
					state: String(this.devStatus),
					code: this.searchValue,
					address: '',
					heartbeat: this.heartbeat
				}).then(res => {
					if (loadMore) {
						console.log(loadMore)
						for (let i = 0; i < res.data.data.length; i++) {
							this.myList.push(res.data.data[i])
						}
					} else {
						this.myList = res.data.data
					}
					this.total = res.data.total
					this.last_page = res.data.last_page
					// this.current_page = res.data.current_page
					// this.myList = res.data.data
				})
			},
			loadMore(e) {
				// console.log(e)
				if (this.current_page < this.last_page) {
					this.current_page += 1
					this.getInfo('loadMore')
				}
			},
			caoZuoDevice(id){
				uni.navigateTo({
					url: '/pages/agent/index/battery?device_id=' + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	background: #F7F7F7;
	.battery-top{
		width: 100%;
		height: 164px;
		background: url('../../static/img/agent/addbg.png') no-repeat center;
		background-size: 100% 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: -35px;
		p{
			font-weight: 400;
			font-size: 14px;
			color: #FFFFFF;
			margin-left: 16px;
		}
		.uni-stat__select{
			margin-right: 10px;
		}
	}
	.content {
		width: calc(100%);
		height: calc(100% - 80upx);
		margin-top: -60px;
		.batt {
			width: 96%;
			padding: 12px 20px;
			background: url('../../static/img/agent/ygbg.png') no-repeat center;
			background-size: 100% 100%;
			margin: 10px auto;
			.bianhao{
				font-weight: 800;
				font-size: 15px;
				color: #000000;
				line-height: 30px;
			}
			.myinfo{
				display: flex;
				justify-content: space-between;
				margin-bottom: 10px;
				font-size: 13px;
				.money {
					color: #999999;
					text {
						color: #fb817f;
					}
				}
				.use {
					color: #fb817f;
				}
			}
			.shebei{
				display: flex;
				justify-content: flex-start;
				border-bottom: #f3f3f3 1px solid;
				.batimg {
					width: 60px;
					margin-right: 20upx;
				}
				.name{
					display: flex;
					align-items: center;
					p{
						font-weight: 500;
						font-size: 15px;
						color: #000000;
						margin-right: 10px;
						line-height: 30px;
					}
					.zaixian{
						display: flex;
						align-items: center;
						width: 54px;
						height: 18px;
						line-height: 18px;
						background: #E6FFE0;
						border-radius: 100px;
						image{
							width: 12px;
							height: 12px;
							display: block;
							margin-left: 6px;
						}
						span{
							font-weight: 400;
							font-size: 11px;
							color: #4AB92F;
							display: block;
							margin-left: 5px;
						}
					}
					.lixian{
						display: flex;
						align-items: center;
						width: 54px;
						height: 18px;
						line-height: 18px;
						background: #FFE7E7;
						border-radius: 100px;
						image{
							width: 12px;
							height: 12px;
							display: block;
							margin-left: 6px;
						}
						span{
							font-weight: 400;
							font-size: 11px;
							color: #FB2525;
							display: block;
							margin-left: 5px;
						}
					}
				}
				.xinxi{
					padding-bottom: 10px;
					width: 250px;
					span{
						font-weight: 400;
						font-size: 12px;
						color: #737373;
						line-height: 26px;
						display: block;
					}
				}
			}
		}
	
		.empty {
			height: 100upx;
			text-align: center;
			line-height: 100upx;
		}
	}
	.u-btn{
		border: 2rpx solid #3eb9fe;
		padding: 8rpx 12rpx;
		border-radius: 20rpx;
		color: #3eb9fe;
		margin-bottom: 10rpx;
		display: flex;
		justify-content: center;
		font-size: 26rpx;
		margin-right: 6px;
	}
	.u-btn:nth-child(4) {
		margin-right: 0 !important;
	}
	.popupWray{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.5);
		.popupBox{
			width: 80%;
			position: relative;
			left: 50%;
			top: 50%;
			background: #fff;
			border-radius: 10upx;
			overflow: hidden;
			transform: translate(-50%,-50%);
			.closeBox{
				width: 80upx;
				height: 80upx;
				position: absolute;
				right: 0;
				top: 0;
				background: #f3f4f6;
				border-bottom-left-radius: 50%;
				
				// width: 50upx;
				// height: 50upx;
				// position: absolute;
				// right: -4upx;
				// top: -4upx;
				>image{
					width: 100%;
					height: 100%;
				}
			}
			input {
				height: 80upx;
				border-bottom: 1upx solid #f7f7f7;
			}
			.btnBox{
				padding: 110upx 50upx;
				>button{
					margin-top: 60upx;
					border-radius: 45upx;
					background: #45bafd;
					color: #fff;
				}
			}
		}
	}
	
	.useOrBuy{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.5);
		.useOrBuyBox{
			width: 290px;
			height: 430px;
			background: url('../../static/img/agent/shebeitc.png') no-repeat center;
			background-size: 100% 100%;
			position: relative;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			.closeBox{
				width: 30px;
				height: 30px;
				position: absolute;
				left: 45%;
				bottom: -50px;
				z-index: 99999;
				>image{
					width: 100%;
					height: 100%;
				}
			}
			.box-content{
				.title{
					font-weight: 500;
					font-size: 22px;
					color: #FFFFFF;
					text-align: center;
					padding-top: 15px;
				}
				.erweima{
					width: 200px;
					height: 200px;
					display: block;
					margin: 60px auto 10px auto;
					border: 7px solid #2F9AFE;
					border-radius: 6px;
				}
				.saoma{
					font-weight: 400;
					font-size: 14px;
					color: #444444;
					text-align: center;
					display: block;
				}
				.shuoming{
					font-weight: 400;
					font-size: 14px;
					color: #444444;
					display: block;
					padding: 15px;
				}
			}
		}
	}
}
</style>
